<template>
  <el-dialog :title="$t('m.packaging.packaging')" :visible="popupVisible" width="1200px" center :before-close="close">
    <el-col class="two">
      <el-row class="info">
          <el-col :span="6" align="left">{{handledTotalQuanlity}}/{{quantity}}</el-col>
          <el-col :span="12" align="center">{{$t('m.packaging.choose')}}</el-col>
          <!-- <el-col :span="6" align="right">00:15</el-col> -->
      </el-row>
      <template v-if="!handledData.length">
        <p style="text-align:center;font-size:16px">{{$t('m.packaging.nodata')}}</p>
      </template>
      <template v-else>
        <el-row class="order-code" v-for="(item,index) in handledData" :key="index">
          <el-col :span="16" :style="{'background-color':item.list[0].color}">
            <span>{{item.packagename}}</span>
          </el-col>
          <el-col :span="7">
            <p>{{item.list.length}}</p>
          </el-col>
        </el-row>
      </template>
    </el-col>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="scan">Scan</el-button>
    </span>
</el-dialog>
</template>
<script>
export default {
  name:'scanDetail',
  props:{
    popupVisible:{
      type:Boolean,
      default:false
    },
    quantity:{
      type:Number,
      default:0
    },
    handledData:{ // 已经处理过的子单数据
      type:Array,
      default:()=>[]
    }
  },
  data(){
    return {
      formInline:{
        packagename:'',
        quantity:0
      }
    }
  },
  computed:{
    handledTotalQuanlity(){ // 已处理过的子单数量
      if(!this.handledData.length) return 0
      let result = 0
      for(let i=0; i<this.handledData.length; i++){
        result+=this.handledData[i].list.length
      }
      return result
    }
  },
  mounted(){
    let _this = this
    document.onkeydown = function(e){
      let key = window.event.keyCode
      if (key === 13){
        _this.scan()
      }
    }
  },
  methods:{
    close(){
      this.$emit('close')
    },
    // 扫描详情dialog
    scan(){
      let data = {
        totalQuantity:this.quantity, // 运单子单总数量
        handledQuanlity:this.handledTotalQuanlity // 已处理过的子单数量
      }
      this.$emit('scan',data)
    }
  }
}
</script>
<style lang="scss" scoped>
.two {
  margin-bottom: 40px;
  .el-row {
    margin-bottom: 25px;
  }
}
.info {
  height: 65px;
  line-height: 65px;
  font-size: 20px;
  border-radius: 3px;
  background-color: #d7d7d7;
}
.info .el-col {
  &:first-child {
    color: #0000ff;
    font-size: 32px;
    padding-left: 12px;
  }
  &:nth-child(2) {
    font-size: 30px;
    color: #333333;
  }
}
.order-code{
  text-align: center;
  line-height: 100px;
  font-size: 48px;
  .el-col {
    margin-left: 8px;
    height: 100px;
    border: 1px solid;
    &:nth-child(2) {
      margin-left: 32px;
    }
  }
}
.el-button {
  font-size: 28px;
  width: 50%;
  height: 56px;
  border-radius: 28px;
}
::v-deep .el-dialog__title {
  font-size: 24px;
}
</style>